<template>
	<div>

		<!--头部开始-->
		<myheader />
		<!--头部结束-->

		<!--表单区域-->

		<div class="udlite-container partners">

		<van-cell-group>

			<van-tabs v-model="active">

			
			<van-tab title="用户名登录" >
			<van-field v-model="username" label="用户名" placeholder="请输入用户名"  />
			</van-tab>

			<van-tab title="手机号登录" >
			<van-field v-model="phone" label="手机号" placeholder="请输入手机号"  />
			</van-tab>

			</van-tabs>

			<van-field v-model="password" type="password" label="密 码" placeholder="请输入密码"  />


			<!--验证码-->
			<van-cell-group>
				
				<drag-verify :width="width" :height="height" :text="text" ref="Verify">

				</drag-verify>

			</van-cell-group>



			<van-cell-group>
				
				<img :src="src" @click="changecode" />

			</van-cell-group>

			<!--图片验证码-->
			<van-field v-model="code" label="验证码" placeholder="请输入验证码"  />



			<van-button type="primary" @click="submit" >登 录</van-button>

			<van-button type="info" >重 置</van-button>


		</van-cell-group>

		</div>

		<!--表单区域-->


	</div>
</template>

<script type="text/javascript">

import myheader from './myheader.vue'

import dragVerify from 'vue-drag-verify'

	export default{

		data(){

			return{

				username:"",
				password:"",
				password1:"",
				active: 0,
				phone:"",
				width:320,
				height:42,
				text:"请您拖动滑块",
				code:"",
				src:'http://localhost:8000/mycode/',
				fileList:[]
	
			}

		},
		//声名组件
		components:{

			'myheader':myheader,
			'dragVerify':dragVerify

		},
		mounted:function(){

		

		},
		//自定义方法
		methods:{
		
			//变更验证码
			changecode:function(){

				var num = Math.ceil(Math.random()*10);

				this.src = this.src + "?num=" + num;


			},
			submit:function(){


				console.log(this.$refs.Verify.isPassing);


				if(this.$refs.Verify.isPassing){


					//请求后端接口
				this.axios.post('http://localhost:8000/login/',this.qs.stringify({'username':this.username,password:this.password})).then((res) =>{

					console.log(res);

					if(res.data.code == 200){

						this.$toast("登录成功");

						localStorage.setItem("username",res.data.username);

						localStorage.setItem("token",res.data.token);

						//跳转
						this.$router.push("/");

					}else{
						this.$toast(res.data.message);
					}

				});



				}else{


					this.$toast('请您拖动滑块');

				}


				// if(this.username == ""){

				// 	this.$toast("请填写用户名");
				// 	return false;
				// }

				
				
			}
		}


	};
	


</script>

<style type="text/css">


img{

	cursor:pointer;
}
	

</style>